import './App.css'
import {
  Suspense,
  lazy
} from 'react'
import {
  Routes,
  Route,
  Navigate
} from 'react-router-dom'
import MainLayout from '@/components/MainLayout'
import BlankLayout from '@/components/BlankLayout'

const Home = lazy(()=>import('@/pages/Home'))
const Search = lazy(()=>import('@/pages/Search'))
const Collection = lazy(()=>import('@/pages/Collection'))
const Trip = lazy(()=>import('@/pages/Trip'))
const Account = lazy(()=>import('@/pages/Account'))
const Login = lazy(()=>import('@/pages/Login'))
const Discount = lazy(()=>import('@/pages/Discount'))


function App() {
  return (
    <>
      <Suspense fallback={<div>loading</div>}>
      {/* 带tabbar的Layout */}
        <Routes >
          <Route element={<MainLayout/>}>
            <Route path="/" element={<Navigate to="/home"/>}></Route>
              <Route path="/home" element={<Home/>}></Route>
              <Route path="/discount" element={<Discount/>}/>
              <Route path="/collection" element={<Collection/>}/>
              <Route path="/trip" element={<Trip/>}/>
              <Route path="/account" element={<Account/>}/>
          </Route>
          <Route element={<BlankLayout/>}>
            <Route path="/search" element={<Search/>}></Route>
          </Route>
        </Routes>
      </Suspense>
    </>
  )
}

export default App
